<template>
  <el-dialog
    title="指定用户"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-form ref="form" :model="form">
      <el-form-item label="请指定选择以下用户为分销员："> </el-form-item>
      <el-form-item
        label="指定用户分销员等级"
        prop="distribute_lv_id"
        :rules="{
          required: true,
          message: '请指定用户分销员等级',
          trigger: 'blur'
        }"
      >
        <el-select
          v-model="form.distribute_lv_id"
          placeholder="请选择"
          size="small"
          style="margin-right:10px;"
          @change="getList"
        >
          <el-option
            v-for="item in options"
            :key="item.distribute_lv_id"
            :label="item.name"
            :value="item.distribute_lv_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <Table
          :data="listData"
          :max-height="360"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="用户名称"
            align="center"
            property="nick_name"
          ></el-table-column>
          <el-table-column label="用户头像" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  $store.state.qiniu + scope.row.cover + $store.state.imgRotate
                "
                width="55px"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="手机号"
            align="center"
            property="phone"
          ></el-table-column>
        </Table>
        <el-pagination
          style="text-align: center;margin-top: 10px;"
          :page-size="4"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  COMMONUSERLIST,
  POINTUSERTODISTRIBUTOR,
  DEFAULTBILI
} from "../../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      Arr: [],
      pages: 1,
      totals: 0,
      form: {
        distribute_lv_id: ""
      },
      options: []
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.getList();
        this.default();
      }
    }
  },
  methods: {
    handleSelectionChange(e) {
      this.Arr = e;
    },
    handleClose() {
      this.$emit("outDialog");
    },
    async handleSumbit() {
      let arr = [];
      this.Arr.forEach(ele => {
        arr.push(ele.member_id);
      });
      await this.$refs["form"].validate(valid => {
        if (valid) {
          POINTUSERTODISTRIBUTOR({
            type: this.form.type,
            member_ids: arr.join(","),
            distribute_lv_id: this.form.distribute_lv_id
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("outDialog", true);
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 4
      };
      await COMMONUSERLIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async default() {
      await DEFAULTBILI().then(({ code, data }) => {
        if (code === 200) {
          this.options = data;
        }
      });
    }
  }
};
</script>
